<template>
  <div id="history-page" class="page-container">
    <div id="header"></div>
    <div id="body">
      <div class="contents">
        <div class="title">
          <span class="text">历史警情</span>
        </div>
        <div class="item" v-for="(item, index) of dataList" @click.stop="selectDate(item)">
          <span>{{ item.date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch, ref } from "vue";
import { useRouter } from 'vue-router'

export default defineComponent({

  setup() {
    const router = useRouter()

    const dataList = [{
      id: 1,
      date: '2016年7月6日',
      t: 180,
      p: 100
    }, {
      id: 2,
      date: '2021年5月10日',
      t: 180,
      p: 95
    }, {
      id: 3,
      date: '2021年8月8日',
      t: 180,
      p: 80
    }, {
      id: 4,
      date: '2023年6月18日',
      t: 180,
      p: 90
    }]

    function selectDate(data: any) {
      // console.log(data, '@@@')
      // 保存year数据，用于显示警情级别
      localStorage.setItem('yearValue', data.p)
        // 通知ue变化
        ; (window as any).ue4('rainData', { year: data.p, time: data.t, history: true })
      router.push({ path: '/home', query: { type: 'history', dateId: data.id } })
    }
    return {
      dataList,
      selectDate
    }
  }
})
</script>

<style scoped>
#history-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('~@/assets/water_page_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#header {
  width: 100%;
  height: 7.5vh;
  margin-top: 1.3vh;
  overflow: hidden;
  background-image: url('~@/assets/城市内涝警情档案.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#body {
  display: flex;
  padding: 3vh 3vh;
  height: calc(100% - 10vh);
}

#body .title {
  width: 50%;
  height: 4vh;
  line-height: 4vh;
  background-image: url('~@/assets/小标题装饰1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  cursor: pointer;
  color: #fff;
  font-size: 3vh;
  font-weight: 500;
  margin: 0 auto;
  margin-bottom: 3vh;
  /* background: linear-gradient(0deg, #32F4DB 0%, #0BA6C7 100%); */
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
}

#body .contents {
  width: 60%;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  margin-top: 10vh;
}

#body .item {
  width: 100%;
  height: 10vh;
  line-height: 10vh;
  color: #fff;
  font-size: 2vh;
  text-align: center;
  /* background-image: url('~@/assets/input-bg.png'); */
  background-image: url('~@/assets/submit-btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 10px 0;
  cursor: pointer;
  transition: all .1s;
}

#body .contents .item:hover {
  transform: scale(1.01);
  font-size: 2.2vh;
}
</style>
